import React from 'react';
import {View, Image, StatusBar} from 'react-native';
import { Lt, Color, Jpp, Jx, Images, Button, ImagePt } from "./_utils";
import { Carousel } from "./_teaset"

const guideImages = [Images.qdy_01, Images.qdy_02, Images.qdy_03, Images.qdy_04];
const guideRates = [ImagePt.qdy_01.r, ImagePt.qdy_02.r, ImagePt.qdy_03.r, ImagePt.qdy_04.r];
const guideColors = [Color.theme, "#9F43F5", "#F58243", "#08B19B"];
// 引导页
export class PageGuide extends React.PureComponent{
    constructor(props){
        super(props);
        this.state = {
            isHidenAfterClick:false,
            backgroundColor:Color.theme,
        };
        this.onChange = this.onChange.bind(this);
    }
    renderImage(pageIndex){
        return <View style = {{height:"90%", justifyContent:"center", alignItems:"center"}}>
            <Image style = {{width:Jpp.width * 0.9, height:Jpp.width * 0.9 * guideRates[pageIndex]}} source = {guideImages[pageIndex]}/>
            {
                ((pageIndex + 1) !== guideImages.length) ? null :
                <Button.Round1
                    title = "立即体验"
                    style = {{
                        alignSelf:"center",
                        marginTop:30,
                        width:200,
                        borderColor:"white",
                        color:"white",
                        borderWidth:3,
                    }}
                    onPress = {()=>{
                        StatusBar.setHidden(false);
                        this.setState({
                            isHidenAfterClick:true,
                        });
                        this.props.onClick && this.props.onClick();
                    }}
                />
            }
        </View>
    }
    onChange(pageIndex, total){
        this.setState({backgroundColor:guideColors[pageIndex]})
    }
    render(){
        if(this.props.isHiden || this.state.isHidenAfterClick){
            return null;
        }
        return <View style = {{flex:1, position:"absolute", backgroundColor:this.state.backgroundColor}}>
            <Carousel
                style = {{width:Jpp.width, height:Jpp.height}}
                onChange = {this.onChange}
                control = {true}
                carousel = {false}
                cycle = {false}
            >
                {this.renderImage(0)}
                {this.renderImage(1)}
                {this.renderImage(2)}
                {this.renderImage(3)}
            </Carousel>
        </View>;
    }
}